:root {
    /* light mode colors */
    --background: #FCF0EA;
    --bg-card: #fcf5f0;
    --bg-shadow: rgba(0, 0, 0, 0.10);
    --bg-footer: #f4e9e4;
    --bg-input: #f8f5f3;
    --color-head: #062034;
    --color-sub: #2b5770;
    --color-card-head: #062034;
    --color-card-sub: #2b5770;

    --color-normal-icon: #5c3b2a;
    --color-mute-icon: #ad9082;
    --color-active-icon: #062034;
}
[data-theme="dark"] {
    /* dark mode colors */
    --background: #062034;
    --bg-card: #33505d;
    --bg-shadow: rgba(0, 0, 0, 0.15);
    --bg-footer: #042232;
    --bg-input: #c4c7c9;
    /* --color-dark: #B6CCDE; */
    --color-head: #fffff2;
    --color-sub: #fffff2;
    --color-card-head: #fffff2;
    --color-card-sub: #a9a99c;

    --color-normal-icon: #bcdcf5;
    --color-mute-icon: #7a8a96;
    --color-active-icon: #fffff2;
}
[data-theme="vibrant"] {
    /* dark mode colors */
    --background: #7f5000;
    --bg-card: #f2e1c2;
    --bg-shadow: rgba(0, 0, 0, 0.10);
    --bg-footer: #f29c27;
    /* --color-dark: #B6CCDE; */
    /* --color-head: #092926; */
    --color-head: #f2e1c2;
    --color-sub: #f2e1c2;
    --color-card-head: #092926;
    --color-card-sub: #4f493e;

    --color-normal-icon: #7f5000;
    --color-active-icon: #f9f6f0;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body{
    background-color: var(--background);
    color: var(--color-card-head);
    font-family: "Lexend", serif, sans-serif;
    user-select: none;
    height: 100vh;  /* standard definition (as fallback) */
    height: 100dvh; /* dynamic vh will make the trick on iOS */
}
/* any class to be defined from below this line. (after html, body and * definitions.) */
a{text-decoration:none}
.container{
    margin: 0 auto;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: scroll;
    padding-bottom: 2.5rem;
    /* margin-bottom: 2rem; */
}
.account--heading{
    padding-top: 0rem;
    /* margin-top: 4rem; */
    color: var(--color-head);
    text-align: center;
    text-decoration: none;
    /* h4 med24 */
    font-family: Lexend;
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.8rem */
}
.card--heading{
    padding-top: 0rem;
    /* margin-top: 4rem; */
    color: var(--color-card-head);
    text-align: center;
    text-decoration: none;
    /* h4 med24 */
    font-family: Lexend;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.8rem */
}
.card--sub{
    color: var(--color-card-sub);
}
.hero-image{
    margin: 0 auto;
    margin-top: 5rem;
}
.active-icon{
    color: var(--color-active-icon);
    width: 2rem;
    height: auto;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-self: center;

    border-top: 1px solid var(--color-active-icon);
}
.normal-icon{
    color: var(--color-normal-icon);
    width: 2rem;
    height: auto;
    margin: 0;
    padding: 0;
    
    display: flex;
    flex-direction: column;
    align-self: center;
}
.normal-icon-font{
    margin: 0;
    padding: 0;
    font-size: 0.6rem;
}
.account--subheading{
    padding: 0;

    max-width: 10.5rem;
    margin: 0rem auto;

    color: var(--color-card-sub);
    text-align: center;
    /* base reg16 160-5 */
    font-family: Lexend;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; 
    letter-spacing: 0.05rem;
}
.account--subheading-1{
}
.landing-head{
    padding-top: 0rem;
    margin: 0 auto;
    /* margin-top: 4rem; */
    color: var(--color-head);
    text-align:left;
    text-decoration: none;
    /* h4 med24 */
    font-family: Lexend;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.8rem */
}
.landing-sub{
    padding: 0;

    max-width: 266px;
    margin: 0rem auto;

    color: var(--color-card-sub);
    text-align: left;
    /* base reg16 160-5 */
    font-family: Lexend;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; 
    letter-spacing: 0.05rem;
}
.account-footer{
    max-width: 14.875rem;
    margin: 0 auto;
    /* margin-top: 15rem; */
    padding-bottom: 0rem;
    color: var(--color-card-sub);
    /* minus-1 extralight12 140-5 */
    font-family: Lexend;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 200;
    line-height: 140%; /* 1.05rem */
    letter-spacing: 0.0375rem;

}
.account--footer-wrapper{
    
}
.svg {
    margin: 0 auto;
    /* max-width: 70%; */
    /* display: flex; */
}
.img{
    /* margin: 0 auto;
    max-width: 100%;
    display: flex; */
}
.btn{
    margin: 0.5em;
    padding: 0.2em;
}
.terms-privacy{
    color: var(--color-card-sub);
}
textarea:focus, input:focus, input:active{
    outline: none;
    border: none;
    background-color: var(--bg-input);
}
/* Below is necessary, when LoV is show for a field input, it activates autofill property */
/* and autofill property has another value as a default background color */
/* Therefore, need to declare that to our color for bg */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
}
.searchItem{
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    /* padding: 0.5rem; */
    border: none;
    border-radius: 25px;
    width: 90%;
    /* height: 80%; */
    outline: none;
    border: none;
    background-color: var(--bg-input);
    text-decoration: none;
    color: var(--color-mute-icon);
}

.searchIcon{
    margin: 0;
    padding: 0.5rem;
    /* margin-left: 0.8rem; */
    border: none;
    background-color: var(--bg-input);
    color: var(--color-mute-icon);
    text-decoration: none;
    border-radius: 25px;
    /* width: 24px;
    height: 100%; */
}